<template>
	<view>
		<view class="bazihehun">

			<view class="input-content">
				<text class="tt_name">姓名</text>
				<input type="text" class="inp" v-model="name" placeholder="请输入姓名">
			</view>

			<view class="input-content1">
				<view class="csrq">
					<text class="tt">生辰</text>
					<uni-datetime-picker class="times" type="datetime" v-model="datetimesgril" @change="changegril" />
				</view>
				<view class="">
					<view class="sex">
						<text class="tt">历法</text>
						<radio-group @change="radioGroupGril" style="transform:scale(0.8)">
							<!--label通常与radio和checkbox结合使用-->
							<label style="display: flex;padding-top: 10rpx">

								<radio value="1" checked="true" />公立
								<radio value="0" style="margin-left: 20px;" />农历
							</label>
						</radio-group>
					</view>
				</view>

				<view class="sex">
					<text class="tt">性别</text>
					<radio-group @change="listenerRadioGroup" style="transform:scale(0.8)">
						<!--label通常与radio和checkbox结合使用-->
						<label style="display: flex;padding-top: 10rpx">

							<radio value="男" checked="true" />男
							<radio value="女" style="margin-left: 35px;" />女
						</label>
					</radio-group>
				</view>
				<view class="sex">
					<text class="tt">是否真太阳时</text>
					<radio-group @change="radioGroupZtys" v-model="zhen" style="transform:scale(0.8)">
					
						<label style="display: flex;padding-top: 10rpx">

							<radio value="1" />是
							<radio value="2" checked="true" style="margin-left: 35px;" />否
						</label>
					</radio-group>
				</view>
			<view class="sex">
					<text class="tt">流派</text>
					<radio-group v-model="sect" style="transform:scale(0.8)">
					
						<label style="display: flex;padding-top: 10rpx">

							<radio value="1" />晚子时日柱算明天
							<radio value="2" checked="true" style="margin-left: 35px;" />晚子时日柱算当天  
						</label>
					</radio-group>
				</view>


			</view>
			<view class="input-content" v-if="showAreaCity">
				<text class="tt" style="padding-left: 20rpx;">出生地区</text>
				<input type="text" class="inp" v-model="cityFull" @focus="showArea=true" placeholder="请选择出生地区">
				<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
					@confirm="confirm" @cancel="showArea=false" :visible="showArea" />
			</view>
			<view class="start" @click="start">
				<text>立即测算</text>
			</view>
		</view>
	</view>
</template>

<script>
	import cityPicker from '../../uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		components: {
			cityPicker
		},
		data() {

			return {
				value:"key1",
				maskCloseAble: true,
				defaultValue: '110101',
				// defaultValue: ['河北省','唐山市','丰南区'],
				column: 3,
				showArea: false,
				cityFull: {
					provinceName: '请选择城市',
					cityName: '',
					areaName: ''
				},
				date_parts_gril: [],
				time_parts_gril: [],

				name: "",
				sex: "0",
				type: "1",
				year: "",
				month: "",
				day: "",
				province:'',
				city:'',
				hours: "",
				minute: "",
				cityFull: "",
				showAreaCity: false,
				zhen: '2',
				sect:"2"


			}
		},
		onShareAppMessage(res) {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: "测一测吧",
				imageUrl: 'https://www.leedong.top/img/suangua1.jpg'
			}

		},
		//2.分享到朋友圈
		onShareTimeline() {

			return {
				title: "测一测吧",
				imageUrl: 'https://www.leedong.top/img/suangua1.jpg'

			}
		},
		methods: {
			confirm(val) {
				console.log(val)
				this.cityFull = val.provinceName + '/' + val.cityName + '/' + val.areaName;
				this.province=val.provinceName;
				this.city=val.cityName.replace('市','');
				this.showArea = false
			},
			listenerRadioGroup(e) {
				this.sex = e.detail.value == '男' ? '0' : '1';
			},
			radioGroupGril(e) {
				this.type = e.detail.value;
			},
			radioGroupZtys(e) {
				this.zhen = e.detail.value;
				if (this.zhen == 1) {
					this.showAreaCity = true;
				} else {
					this.showAreaCity = false;
				}
				console.log(this.zhen)
			},

			changegril(v) {
				this.dategshG(v)
			},
			start() {
				let parmas = {
					'province':this.province,
					'city':this.city,
					'name': this.name,
					'sex': this.sex,
					'type': this.type,
					'zhen':this.zhen,
					'year': this.date_parts_gril[0],
					'month': this.date_parts_gril[1],
					'day': this.date_parts_gril[2],
					'hours': this.time_parts_gril[0],
					'minute': this.time_parts_gril[1],
					'sect':this.sect


				}
				if(!this.name){
					uni.showToast({
						title:"请输入姓名",
						icon:'none',
					})
					return false;
				}
		
				if(!this.date_parts_gril[0]){
					uni.showToast({
						title:"请输入出生日期",
						icon:'none',
					})
					return false;
				}
				if(this.zhen == 1){
					if(!this.city){
						uni.showToast({
							title:"请选择出生城市",
							icon:'none',
						})
						return false;
					}
				}
		
				uni.navigateTo({
					url: "/pages/bazijingsuan/details?data=" + JSON.stringify(parmas)
				})
		

			},

			dategshG(v) {
				let date_time_parts = v.split(" ")
				this.date_parts_gril = date_time_parts[0].split("-")
				this.time_parts_gril = date_time_parts[1].split(":")
			}

		}
	}
</script>

<style lang="scss">
	.uni-date-editor--x {

		margin-left: 10rpx;
		margin-right: 10px !important;
	}

	.bazihehun {
		.input-content1 {

			align-items: center;
			margin-top: 20px;
		

			.csrq {
				.tt {
					padding-left: 20rpx;
					width: 50px;
				}

				display: flex;
				align-items: center;



			}

			.sex {
				width: auto;
				margin-right: 10px;
				display: flex;
				align-items: center;
				margin-top: 20px;

				.tt {
					padding-left: 20rpx;
					width: 50px;
				}
			}
		}

		.input-content {
			display: flex;

			margin-top: 20px;
			align-items: center;

			.tt_name {
				padding-left: 20rpx;
				display: inline-block;
				width: 50px;
			}

			.inp {
				width: calc(100% - 90px);
				border: 1px solid #e5e5e5;
				border-radius: 4px;
				background-color: #fff;
				color: #666;
				font-size: 14px;
				height: 37px;
				align-items: center;
				padding-left: 20px;
				margin-right: 10px;

			}
		}

		.start {
			width: 100%;
			text-align: center;

			text {
				width: 120px;
				display: inline-block;
				background-color: #e32616;
				font-size: 30rpx;
				color: #fff;
				padding: 10px;
				border-radius: $uni-border-radius-base;
				line-height: 15px;
				margin-top: 20px;
			}

		}

	}
</style>